<template>
    <div>
        <div class="search-bar">
          <van-row>
              <van-col span="2" class="icon-bar" @click="goBack">
                  <van-icon name="arrow-left" size="1.5rem" color="#1989fa"/>
                <!-- <van-icon name="location-o" size="1.5rem"/> -->
              </van-col>
              <van-col span="22">
                 <van-search
                  v-model="searchInfo"
                  show-action
                  background="#ff304e"
                  placeholder="请输入搜索关键词"
                  @search="search"
                >
                  <template #action>
                    <div @click="search(searchInfo)">搜索</div>
                  </template>
                </van-search>
              </van-col>
          </van-row>
      </div>
      <div>
      <div class="goods" v-if="searchGoodsList.length>0">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <van-row gutter="20" type="flex">
                    <van-col span="12" @click="jumpGoodsInfo(item.id)" v-for="( item, index) in searchGoodsList" :key="index">
                         <div class="goodsInfo">
                            <div class="goodsImage">
                                <img :src="item.productImg" width="100%"/>
                            </div>
                            <div class="goodsName">{{item.productName}}</div>
                            <div class="goodsPrice">
                                <b class="presentPrice">现价:￥{{item.presentPrice}}</b>
                                <span class="oldPrice">原价:￥{{item.oldPrice}}</span>
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </van-list>
        </div>
        <div v-else class="noGoods">没有找到搜索相关商品</div></div>
    </div>
</template>

<script>
    import axios from 'axios'
    import { Toast } from 'vant'
    export default {
        data(){
            return{
                loading: false,   //上拉加载使用
                finished: false,  //上拉加载是否没有数据了
                searchGoodsList: [], //商品列表
                searchInfo: null, //传入的搜索框的信息
                pageNum: 1,
            }
        },
        created(){
            this.searchInfo = this.$route.params.searchInfo
            this.getSearchGoodsList()
        },
        mounted(){
            this.$store.dispatch('HIDENAV')
        },
        destroyed(){
            this.$store.dispatch('SHOWNAV')
        },
        methods:{
            goBack(){
                this.$router.push({ path:'/home' })
            },
            search(value){
                this.searchGoodsList = []
                this.pageNum = 1
                this.getSearchGoodsList()
            },
            getSearchGoodsList(){
                axios({
                     url: 'http://localhost:3000/goods/getGoodsListBySearch',
                     method: 'post',
                     data:{
                            searchContent: this.searchInfo,
                            pageNum: this.pageNum

                        } 
                }).then(response =>{
                    console.log(response.data);
                    if(response.status == 200  ){
                        if(response.data.message){
                            this.pageNum++
                            console.log(this.pageNum);
                            this.searchGoodsList=this.searchGoodsList.concat(response.data.message)
                        }else{
                            this.finished = true;
                        }
                    } 
                    this.loading=false;
                    console.log(this.finished)
                })
                .catch(error=>{
                    console.log(error)
                })
            },
            onLoad(){//上拉加载函数
                setTimeout(()=>{
                    this.getSearchGoodsList()
                },1000)
            },
            jumpGoodsInfo(id){//跳转到商品详细页
                console.log("id========",id);
                this.$router.push({name:'goodDetail',params:{goodsId:id}})
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../assets/css/goods.css';
    .noGoods{
        text-align: center;
        font-size: .85rem;
        margin-top: 5px;
    }
</style>